new Vue({
    el: '#app',
    data() {
        return {
            pickerOptions:pickerOptionsTwo,
            form: {//表单
                Article_Name:"",
                Category_SerialNumber:"",
                Warehouse_SerialNumber:"",
                Enterprise_Info_SerialNumber:$.cookie('enterprise'),
                Start_Date:'',
                End_Date:'',
                page: 1,			//页数
                limit: 10			//每页数据条数
            },
            statistics:{},//仓库明细
            tableData: [],//表格
            Category:[{//全部可选类别
                Category_Name:'全部类别',
                Category_SerialNumber:"",
            }],
            Wares:[{//全部可选仓库
                Warehouse_Name:'全部仓库',
                Warehouse_SerialNumber:"",
            }],
            histogram:{//热销商品echarts
                Article_Name:[],
                Out_Total_Quantity:[]
            },
            expiration:[],
            total: 0,
            time:null
        }
    },
    mounted() {
        this.form.End_Date = getYMDHMSDate();
        this.form.Start_Date  = getYMDHMSDate(new Date().getTime() - 30 * 24 * 60 * 60 * 1000);
        this.time = [this.form.Start_Date, this.form.End_Date]
        this.getList(this.form)
        this.getWares()
        this.getCategorys()
    },
    methods: {
        SelectGoods(){//搜索商品
            this.form.page=1
            this.getList(this.form)
        },
        ChangeWare(){//下拉框选择仓库
            this.form.page=1
            this.getList(this.form)
        },
        ChangeCategory(){//下拉框选择类别
            this.form.page=1
            this.getList(this.form)
        },
        DateChange() {
            this.page = 1;
            if (this.time != null) {
                this.form.Start_Date = this.time[0]
                this.form.End_Date = this.time[1]
            } else {
                this.form.Start_Date = ''
                this.form.End_Date = ''
            }
            this.getList(this.form);
        },  
        getList(data) {     //换页方法
            const _this = this
            $.ajax({
                type: 'POST',
                url: `${DomainName}/getWarehouseReport1Action?token=${$.cookie('token')}`,
                data,
                complete: function (XMLHttpRequest) {
                    if (XMLHttpRequest.getResponseHeader("REDIRECT") == "REDIRECT") {
                        window.parent.document.location.href = absolutepath() + XMLHttpRequest.getResponseHeader("CONTENTPATH");
                    }
                },
                success: function (Result) {
                    console.log(Result)
                    if (Result.Status == 'success') {
                        _this.tableData = Result.tableData
                        _this.total = parseInt(Result.limit)
                        _this.statistics = Result.statistics
                        _this.histogram = Result.histogram
                        _this.expiration = Result.expiration
                        _this.GetEharts1()
                        _this.GetEharts2()
                    }
                },
                dataType: "json"
            });
        },
        getWares(){//获取所有可选仓库
            const _this = this
            $.ajax({
                type: 'POST',
                url: `${DomainName}/getInquiryAction?token=${$.cookie('token')}`,
                data:{
                    Data: 'warehouse_info',
                },
                complete: function (XMLHttpRequest) {
                    if (XMLHttpRequest.getResponseHeader("REDIRECT") == "REDIRECT") {
                        window.parent.document.location.href = absolutepath() + XMLHttpRequest.getResponseHeader("CONTENTPATH");
                    }
                },
                success: function (Result) {
                    console.log(Result)
                    _this.Wares=Result;
                    
                },
                dataType: "json"
            });
        },
        getCategorys(){//获取所有可选仓库
            const this_ = this
            $.ajax({
                type: 'POST',
                url: `${DomainName}/GoodsFileInquiry`,
                data:{
                    Data: 'category',
                },
                complete: function (XMLHttpRequest) {
                    if (XMLHttpRequest.getResponseHeader("REDIRECT") == "REDIRECT") {
                        window.parent.document.location.href = absolutepath() + XMLHttpRequest.getResponseHeader("CONTENTPATH");
                    }
                },
                success: function (Result) {
                    this_.Category.push(...Result)
                    console.log(Result)
                },
                dataType: "json"
            });
        },
        handleSizeChange(val) {
            this.form.page = 1;
            this.form.limit = val;
            this.getList(this.form)
        },
        handleCurrentChange(val) {
            this.form.page = val;
            this.getList(this.form)
        },
        //echats
        GetEharts1() {//柱状
            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(document.getElementById('container1'));
            let data1 = []
            let data2 = []
            this.histogram.Article_Name.forEach(item=>{
                data1.push(item)
            })
            this.histogram.Out_Total_Quantity.forEach(item=>{
                data2.push(item)
            })
            console.log(this.histogram.Article_Name,data2)
            // 指定图表的配置项和数据
            let option = {
                legend: {
                    data: ['销量']
                },
                tooltip: {// 提示框组件。// trigger:'item' 默认的鼠标移动到色块上触发
                    trigger: 'axis', // 鼠标只要在轴上就会触发
                    triggerOn: 'click', // 触发方式 一般不用 click 简化用户操作
                    //formatter:`{a}（系列名称），{b}（类目值），{c}（数值）`   点击时的回调 可以是模板字符串 也可以是函数
                    formatter: function (arg) {
                        return arg[1].name + arg[1].data
                    }
                },
                title: {
                    text: '仓品热销'
                },
                xAxis: {
                    data: data1
                },
                yAxis: {},
                series: [
                    {
                        name: '销量',
                        type: 'bar',
                        data: data2
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        },
        GetEharts2() {//饼图
            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(document.getElementById('container2'));
            this.expiration.forEach(item=>{
                item.value = Number(item.value)
            })
            // 指定图表的配置项和数据
            let option = {
                series: [
                    {
                        type: 'pie',
                        data:this.expiration,
                        radius: '50%',
                        label: {
                            show: true,
                            formatter: function (arg) {
                                return arg.data.name + '商品' + arg.data.value + ' 件 \n' +
                                    arg.percent + '%'
                            }
                        }
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        },
        Pricethousands(num) {//转千分位
            return thousands(num)
        },
    },
})